<!-- 组合式 -->
<script setup>
import { ref, reactive, watch, onMounted } from "vue";

// pinia
import { useUserStore } from "@/stores";
import util from "@/utils/util";

import loginFormVue from "@/views/login/components/login-form.vue";
import loginForm2Vue from "@/views/login/components/login-form2.vue";

// 参数
const pages = reactive({
  type: 1,
});

// 挂载
onMounted(() => {
  init(); // 初始化
});

// 初始化
async function init() {
  // util.showLoading();
  // await api.
  // util.hideLoading();
}

// 登录、注册
async function changeLogin(data) {
  //   const res = await api.user.login(data);
  // 登录成功
  //   useUserStore().login(res.data.token);
  // 用户信息
  // api.getUser();
}

// 注冊
async function changeSave(data) {
  // await api.userSave(data);

  localStorage.setItem("token", "--");
  util.to("/home");
}
</script>

<template>
  <div class="login-home">
    <div class="login-home-left">
      <img
        class="image"
        :src="util.getImageUrl('login-back.png')"
        alt="cover"
      />
      <img
        class="login-logo"
        :src="util.getImageUrl('login-logo.png')"
        alt="cover"
      />
    </div>

    <div class="login-home-right">
      <!-- @register="pages.type = 2" -->
      <login-form-vue
        v-model:type="pages.type"
        @login="changeLogin"
        v-if="pages.type == 1"
      />
      <login-form2-vue v-model:type="pages.type" @save="changeSave" v-else />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.login-home {
  display: flex;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  background-color: #f1f4fb;

  .login-home-left {
    position: relative;
    height: 100%;
    flex: 1;

    .image {
      width: 100%;
      height: 100%;
    }

    .login-logo {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      top: 45%;

      width: 60%;
      // width: 863px;
      // height: 106px;
      // transform: translateY(-50%);
    }
  }

  .login-home-right {
    width: 35vw;

    .login-home-form {
    }
  }
}
</style>
